<template>
	<view>
		<!--  手机顶部高度 -->
		<view :style="{height: systemBarHeight + 'px'}">
		</view>
		<view class="navbar">
			<uni-nav-bar @clickLeft="fh" :border="false" left-icon="left" title="品牌名称" />
		</view>

		<view class="brand_tit">
			<view class="brand_tit_lf">
				<image src="/static/model/xiaomi.png" mode=""></image>
			</view>
			<view class="brand_tit_rg">
				<view class="brand_tit_rg1">
					<text>仿生机器人</text>
				</view>
				<view class="brand_tit_rg2">
					<text>国内第一版仿生四足机器人CyberDog</text>
				</view>
			</view>
			<view class="brand_tit_rgg" @click="tohome()">
				<text>品牌主页</text>
			</view>
		</view>

		<view class="brand_product">
			<view class="brand_product_item" v-for="(item,index) in productList" :key="index">
				<view class="brand_product_item1">
					<image src="/static/logo.png" mode=""></image>
					<text>{{item.tit}}</text>
					<view class="brand_product_item1_bt">
						<text>询价</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tot">

		</view>

		<view class="paixu">
			<text>排序</text>
			<view class="tabs">
				<v-tabs v-model="current" color="#7D8CA4" paddingItem="0 40rpx" line-height="8rpx" :line-scale="0.2"
					active-color="#152034" line-color="#386AF6" :tabs="tabs" @change="changeTab"></v-tabs>
			</view>

		</view>

		<view class="product">
			<view class="productlist">
				<view class="productlist_item">
					<view class="productlist_item_lf">
						<image src="/static/logo.png" mode=""></image>
					</view>

					<view class="productlist_item_rg">
						<view class="productlist_item_rg_tit">
							<text>CyberDog仿生四足机器人（工程探索版）</text>
						</view>

						<view class="productlist_item_bom">
							<view class="productlist_item_bom_lf">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="productlist_item_bom_lf">
								<text class="type1">体重</text>
								<text class="type2">14kg</text>
							</view>

							<view class="productlist_item_bom_bt">
								<button type="default">去咨询</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,
				productList: [{
						tit: 'CyberDog机器人'
					},
					{
						tit: 'CyberDog机器人'
					},
					{
						tit: 'CyberDog机器人'
					}
				],
				current: 0,
				tabs: ['价格高低', '销售高低']
			}
		},
		mounted() {
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			/* 返回 */
			fh() {
				uni.navigateBack({
					delta: 1 // 返回的页面层级，1表示返回上一页
				});
			},
			changeTab(index) {
				console.log('当前选中的项：' + index)
			},
			tohome(){
				uni.navigateTo({
					url:'/pages/model/bramd_Home'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.brand_tit {
		display: flex;
		width: 88%;
		margin: 30rpx auto 0;
		align-items: center;

		.brand_tit_lf {
			>image {
				width: 69rpx;
				height: 69rpx;
				border-radius: 34.5rpx;
			}
		}

		.brand_tit_rg {
			margin-left: 15rpx;

			.brand_tit_rg1 {

				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 31rpx;
				color: #152034;
			}

			.brand_tit_rg2 {

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #45516B;
				margin-top: 15rpx;

			}
		}

		.brand_tit_rgg {
			width: 153rpx;
			height: 69rpx;
			background: #FFFFFF;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			border: 1rpx solid #7D8CA4;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #7D8CA4;

		}
	}

	.brand_product {
		display: flex;
		width: 91%;
		margin: 45rpx auto 0;

		.brand_product_item {
			width: 219rpx;
			margin: auto;

			.brand_product_item1 {
				>image {
					width: 219rpx;
					height: 160rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}

				>text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 27rpx;
					color: #152034;
					margin-top: 15rpx;
				}

				.brand_product_item1_bt {
					width: 153rpx;
					height: 69rpx;
					background: #1677FF;
					border-radius: 38rpx 38rpx 38rpx 38rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 27rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 15rpx auto 0;
				}
			}
		}
	}

	.tot {
		width: 750rpx;
		height: 15rpx;
		background: #F4F6F9;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 45rpx;
	}

	.paixu {
		width: 91%;
		margin: 30rpx auto 0;
		display: flex;
		align-items: center;

		>text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 31rpx;
			color: #7D8CA4;
		}

		.tabs {
			margin-left: 91rpx;
		}
	}

	.product {
		width: 91%;
		margin: 45rpx auto 0;

		.productlist {
			.productlist_item {
				display: flex;

				.productlist_item_lf {
					>image {
						width: 229rpx;
						height: 172rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}
				}

				.productlist_item_rg {
					margin-left: 30rpx;

					.productlist_item_rg_tit {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 31rpx;
						color: #152034;
					}

					.productlist_item_bom {
						display: flex;
						align-items: center;
						margin-top: 17rpx;

						.productlist_item_bom_lf {
							display: flex;
							flex-direction: column;
							margin-right: 45rpx;

							.type1 {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 23rpx;
								color: #7D8CA4;
							}

							.type2 {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 23rpx;
								color: #45516B;
								margin-top: 10rpx;
							}
						}

						.productlist_item_bom_bt {
							margin-left: auto;
						}
					}



				}

			}
		}
	}

	.productlist_item_bom_bt button {
		width: 153rpx;
		height: 69rpx;
		background: #1677FF;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 27rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>